import React, { useState } from 'react'
import "../css/drop.css"

export default function drop() {
    const [flag, setflag] = useState(true)

    let i = 0;
    document.onclick = (e: any) => {
        if (e.target.className == "learnCon bor") {
            setflag(false)
        } else {
            setflag(true)
        }
    }
    let add = () => {
        i++;
        let id = "inp" + i;
        var inp = document.createElement("input");
        inp.setAttribute("draggable", "true");
        inp.setAttribute("id", id);
        let studyCon = document.getElementsByClassName("studyCon")[0];
        let learnCon: any = document.getElementsByClassName("learnCon")[0];
        studyCon.prepend(inp);
        inp.ondragstart = function (e: any) {
            var e = e || window.event
            e.dataTransfer.setData('text', e.target.id);
        }
        learnCon.ondragover = function (e: any) {
            var e = e || window.event;
            e.preventDefault()
        }
        learnCon.ondrop = function (e: any) {
            setflag(false)
            var e = e || window.event;
            let aaa = document.createElement("div");
            var ids = e.dataTransfer.getData('text', e.target.id);
            let input: any = document.getElementById(ids);
            aaa.style.position = "relative"
            let shut = document.createElement("div");
            shut.style.position = "absolute";
            shut.style.display = "none";
            shut.style.right = "0px";
            shut.style.top = "10px";
            shut.style.width = "20px";
            shut.style.height = "20px";
            shut.style.borderRadius = "10px";
            shut.style.backgroundColor = "pink";
            shut.style.color = "white";
            shut.style.textAlign = "center";
            shut.style.lineHeight = "20px";
            shut.style.fontSize = "16px";
            shut.innerHTML = "×";

            input.onmouseenter = () => {
                console.log(1);

                shut.style.display = "block";
            }
            input.onmouseleave = () => {
                shut.style.display = "none";
            }
            shut.onclick = (e: any) => {
                e.target.parentNode.remove();
            }
            aaa.appendChild(input);
            aaa.appendChild(shut);
            e.target.appendChild(aaa);
        }
    }
    return (
        <div className='drop'>
            <div className="study">
                <div className="studyHeader">
                    study
                </div>
                <div className="studyCon">
                    <div className="add" onClick={add}>
                        +
                    </div>
                </div>
            </div>
            <div className="learn">
                <div className="learnHeader">
                    learn
                </div>
                <div className={flag ? "learnCon" : "learnCon bor"}></div>
            </div>
            <div className="complete">
                <div className="completeHeader">
                    complete
                </div>
                <div className="completeCon"></div>
            </div>
        </div>
    )
}
